<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col group_1">
				<view class="justify-center section_1" v-if="vuex_has_login"
				 :style="{backgroundImage: 'url(' + user_center_bg +')'}">
					<image :src="vuex_user.avatar ? vuex_user.avatar : 'static/icon/default_thumb.svg'"
						class="image_1" />
					<view class="flex-col group_2">
						<text>会员：{{vuex_user.nickname}}</text>
						<text class="text_2" @click="logout">点击退出</text>
					</view>
				</view>
				<view class="justifyCenter section_1" v-else :style="{backgroundImage: 'url(' + user_center_bg +')'}">
					<view class="avator">
						<image src="/static/icon/default_thumb.svg" class="avatorImg" />
					</view>
					<view class="loginBtn" @click="wx_login()">点击登录</view>
					<view class="loginBtn" @click="wx_rlogin()">点击注册登录</view>
				</view>

				<view class="section_2 justify-between items-center" @click="toBaseinfo">
					<view class="flex-row items-center">
						<image src="../../static/svgicon/jibenxinxi.svg" class="image_10" />
						<text class="text_9">个人基本信息</text>
					</view>
					<image src="../../static/svgicon/right_arrow.svg" class="image_4 image_16" />
				</view>
			</view>
			<view class="section_3">
				<input type="nickname" @blur="getnickname" placeholder="请输入昵称" class="ms-4 "
					v-model="model.nickname" />
			</view>
		
		</view>
		<view class="d-flex align-items-center">
			
			<view class="">
				<button open-type="getPhoneNumber" @getphonenumber="wx_mlogin">手机注册登录
				</button>
				
			</view>
		</view>
		<view class="d-flex align-items-center">
			
			<view class="">
				<button open-type="openSetting" >button
				</button>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import config from '@/common/config.js';
	import { http_mpWeixinRegisterByProfileAndLogin } from '@/common/api.js' 
	export default {
		data() {
			return {
				user_center_bg: config.exteralImageBaseUrl + '/assets/miniprogram/img/user_center_bg.png'
			};
		},
		onLoad() {
			uni.hideShareMenu()
		},
		methods: {
			toBaseinfo() {
				if (!this.vuex_has_login) {
					this.$u.toast('请先登录');
					return
				}
				this.$u.route({
					url: 'pages/me/baseinfo'
				});
			},

			wx_rlogin() {
				let data = {
					nickname: '小东子',
					avatar: 'http://zzyy-local.firstmove.club/uploads/20230526/e7c943ca9c9c238b9fa30e943b4b4aa1.png'
				}
				new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: (res) => {
							data.code = res.code
							resolve()
						},
						fail: (err) => {
							reject(err)
						},
					})
				}).then(() => {
					// console.log('http request');
					// console.log(data);
					http_mpWeixinRegisterByProfileAndLogin(data)
						.then((res) => {
							console.log(res);
							this.$u.toast(res.msg, 2000)
							if (1 == res.code) {
								this.vuex_login(res)
							}
							uni.hideLoading()
						})
				}).catch((e) => {
					uni.hideLoading()
					console.log(e);
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: rgb(243, 243, 243);
		width: 100%;
		overflow-y: auto;
		height: 100%;

		.group {
			flex: 1 1 auto;
			overflow-y: auto;

			.group_1 {
				padding-bottom: 16rpx;

				.section_1 {
					padding: 84rpx 80rpx 112rpx;
					color: rgb(255, 255, 255);
					font-size: 36rpx;
					font-weight: 600;
					line-height: 50rpx;
					white-space: nowrap;
					background-color: #0000ff;
					background-position: 0px 0px;
					background-size: 750rpx 336rpx;
					background-repeat: no-repeat;

					.image_1 {
						border-radius: 50%;
						width: 140rpx;
						height: 140rpx;
					}

					.group_2 {
						margin-left: 48rpx;
						width: 402rpx;

						.text_2 {
							margin-top: 40rpx;
						}
					}

					.avator {
						width: 140rpx;
						height: 140rpx;
						// background: rgba(226, 157, 182, 0.5);
						// border: 2rpx solid #D85886;
						// border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						.avatorImg {
							width: 100%;
							height: 100%;
						}
					}

					.loginBtn {
						height: 56rpx;
						font-size: 36rpx;
						font-weight: 600;
						color: #ff0065;
						margin-left: 84rpx;
						border-bottom: 2px solid #FFFFFF;
						padding-bottom: 4rpx;
					}
				}

				.justifyCenter {
					display: flex;
					align-items: center;
				}

				.section_2 {
					margin-top: 16rpx;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					white-space: nowrap;
					padding: 28rpx 32rpx;
					background-color: #ffffff;

					.group_4 {
						margin-top: 36rpx;

						.group_6 {
							margin-top: 36rpx;

							.image_9 {
								margin: 6rpx 8rpx 6rpx 0;
							}

							.image_8 {
								margin: 4rpx 0;
								width: 56rpx;
								height: 56rpx;
							}

							.text_6 {
								margin-left: 10rpx;
							}
						}
					}

					.group_10 {
						margin-top: 36rpx;

						.image_14 {
							margin: 6rpx 8rpx 6rpx 0;
						}

						.text_8 {
							margin-left: 10rpx;
						}
					}

					.image_16 {
						margin: 6rpx 8rpx 6rpx 0;
					}

					.top-group {
						padding: 0 4rpx;

						.right {
							margin: 6rpx 4rpx 6rpx 0;
						}

						.image_2 {
							width: 56rpx;
							height: 56rpx;
						}

						.text_3 {
							margin-left: 10rpx;
						}
					}

					.image_12 {
						margin: 6rpx 8rpx 6rpx 0;
					}

					.text_9 {
						margin-left: 10rpx;
					}

					.image_4 {
						width: 56rpx;
						height: 56rpx;
					}

					.text_7 {
						margin-left: 10rpx;
					}

					.image_10 {
						width: 56rpx;
						height: 56rpx;
					}
				}
			}

			.section_3 {
				background-color: #ffffff;
				height: 398rpx;
			}
		}
	}
</style>
